import { ref, computed } from "vue";
import {
    GetUpdateWorksList,
    GetWorksSquareHot,
    GetWorksSquareTop,
    GetWorksSquareList,
    GetWorksSquareFamous,
    GetWorksSquareAcademy,
    GetOtherListApi,
    SetPlatformModuleViews,
    GetBanner,
} from "~/api";

const shuffleArray = (array) => {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
};

export const useContent = () => {
    const pageStore = usePageStore();
    const keyword = ref("");
    const tabActive = ref(1);
    const tabList = ref([
        {
            label: "3D展厅",
            value: 1,
        },

        {
            label: "互动课件",
            value: 2,
        },
    ]);
    const updateList = ref([]);
    const updateList2 = ref([]);
    const list = ref([]);
    const list2 = ref([]);
    const topList = ref([]);
    const hotList = ref([]);
    const famousList = ref([]);
    const academyList = ref([]);
    const bannerList = ref([]);
    const yejinList = ref([]);
    const dianliList = ref([]);
    const xiaofangList = ref([]);
    const isLoading = ref(true);
    const pagination = ref({
        size: 48,
        page: 1,
    });
    const name = "用户发布（UGC）";
    const sortList = reactive([
        {
            name: "page_view",
            text: "人气排序",
        },
        {
            name: "createtime",
            text: "时间排序",
        },
    ]);
    const sortName = ref("page_view");
    const sortType = ref("desc");

    useSeoMeta({
        title: "元宇宙展馆_Web3D展厅_VR展览展会_3D线上展台搭建-北京华锐云空间",
        description:
            "华锐云空间是专业的三维数字空间搭建平台，提供3D展厅/展馆/展品/展会/展台线上制作工具，可快速编辑和生成三维展厅，500+模板任选。电话：13611042909",
        keywords: "虚拟现实云展,3D展览会,虚拟数字展厅,三维互动展馆,VR企业展厅",
    });

    const renderList = computed(() => {
        if (tabActive.value == 1) {
            return list.value.length
                ? list.value.slice(
                    (pagination.value.page - 1) * 48,
                    pagination.value.page * 48
                )
                : [];
        } else {
            return list2.value.length
                ? list2.value.slice(
                    (pagination.value.page - 1) * 48,
                    pagination.value.page * 48
                )
                : [];
        }
    });

    const GetNewList = async () => {
        // 清空列表
        let type = tabActive.value;
        isLoading.value = true;
        const res = await GetWorksSquareList({
            type,
            sortName: sortName.value,
            sortType: sortType.value,
        });
        isLoading.value = false;
        if (res.code == 200) {
            if (pageStore.isMobile) {
                let data = res.data.map((item) => ({
                    ...item,
                    isPause: true,
                }));
                return data;
            } else {
                if (type == 1) {
                    list.value = res.data;
                } else {
                    list2.value = res.data;
                }
            }
        }
    };

    const GetTopList = async () => {
        const res = await GetWorksSquareTop();
        if (res.code == 200) {
            if (pageStore.isMobile) {
                let data = res.data.map((item) => ({
                    ...item,
                    isPause: true,
                }));
                return shuffleArray(data);
            } else {
                topList.value = res.data;
            }
        }
    };

    const GetHotList = async () => {
        const res = await GetWorksSquareHot();
        if (res.code == 200) {
            if (pageStore.isMobile) {
                let data = res.data.map((item) => ({
                    ...item,
                    isPause: true,
                }));
                return shuffleArray(data);
            } else {
                hotList.value = res.data;
            }
        }
    };

    const GetFamousList = async () => {
        const res = await GetWorksSquareFamous();

        if (res.code == 200) {
            if (pageStore.isMobile) {
                let data = res.data.map((item) => ({
                    ...item,
                    isPause: true,
                }));
                return shuffleArray(data);
            } else {
                famousList.value = res.data;
            }
        }
    };

    const GetAcademyList = async () => {
        const res = await GetWorksSquareAcademy();

        if (res.code == 200) {
            if (pageStore.isMobile) {
                let data = res.data.map((item) => ({
                    ...item,
                    isPause: true,
                }));
                return shuffleArray(data);
            } else {
                academyList.value = res.data;
            }
        }
    };

    const GetOtherList = async (type, otherList) => {
        const res = await GetOtherListApi({
            type
        });
        if (res.code == 200) {
            if (pageStore.isMobile) {
                let data = res.data.map((item) => ({
                    ...item,
                    isPause: true,
                }));
                return shuffleArray(data);
            } else {
                otherList.value = res.data;
            }
        }
    }

    const GetUpdateList = async (type, updateListVal) => {
        const res = await GetUpdateWorksList({
            type
        });

        if (res.code == 200) {
            updateListVal.value = res.data;
        }
    }

    const GetBannerList = async (category_id) => {
        const res = await GetBanner({ category_id });
        if (res.code == 200) {
            bannerList.value = res.data;
        }
    };

    const onSearch = (value) => {
        keyword.value = value;
        pagination.value.page = 1;
    };

    const onPageChange = async (page) => {
        pagination.value.page = page;
        await nextTick();
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };

    const onSort = (name) => {
        if (sortName.value == name) {
            sortType.value = sortType.value == "asc" ? "desc" : "asc";
        } else {
            sortName.value = name;
            sortType.value = "desc";
        }
        GetNewList();
    };

    watch(tabActive, () => {
        GetNewList();

        if (tabActive.value == 2) {
            GetOtherList(4, xiaofangList);
            GetOtherList(6, dianliList);
            GetOtherList(7, yejinList);
            GetUpdateList('2,4,6,7', updateList2);
        }
    });

    SetPlatformModuleViews({ name: "作品广场" });

    return {
        keyword,
        updateList,
        updateList2,
        list,
        list2,
        tabActive,
        tabList,
        topList,
        hotList,
        yejinList,
        dianliList,
        xiaofangList,
        famousList,
        academyList,
        renderList,
        bannerList,
        isLoading,
        pagination,
        name,
        sortList,
        sortName,
        sortType,
        onSort,
        onPageChange,
        onSearch,
        GetNewList,
        GetHotList,
        GetTopList,
        GetFamousList,
        GetAcademyList,
        GetOtherList,
        GetBannerList,
        GetUpdateList
    };
};
